<template>
  <div class="find_container">
    <div>
      <ul v-for="(item, index) in page1Data" :key="index">
        <li v-for="(topic, index) in item.topics" :key="index">
          <updownShow v-if="topic.style===1" :topic="topic"></updownShow>
          <leftrightShow v-if="topic.style===2" :topic="topic"></leftrightShow>
          <picShow v-if="topic.style===4" :topic="topic"></picShow>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  
  import updownShow from './components/updownShow'
  import leftrightShow from './components/leftrightShow'
  import picShow from './components/picShow'
  export default {
    name: 'index',
    computed:{
      ...mapState({
        page1Data: state => state.topic.topicData
      }),
    },
    mounted () {
      new BScroll('.find_container', {
        scrollY: true
      })
    },
    components:{
      'updownShow':updownShow,
      'leftrightShow':leftrightShow,
      'picShow':picShow
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

</style>
